$(function() {
    // 电梯导航效果
    // 第一关 移动和固定电梯导航栏
    var flag = true; //节流阀
    var boxTop = $(".nav-container").offset().top;
    $(window).scroll(function() {
        if ($(document).scrollTop() >= boxTop) {
            $(".nav-container").css({
                position: "fixed",
                top: 0,
                zIndex: 2,
            })
        } else {
            $(".nav-container").css({
                position: "static",
            })
        }
    });
    //  第二关、 当点击导航栏小li的时候滑动到对应的模块
    // 当我们每次点击小li 就需要计算出页面要去往的位置 
    // 选出对应索引号的内容区的盒子 计算它的.offset().top

    $(window).scroll(function() {
        // 3. 页面滚动到某个内容区域，左侧电梯导航小li相应添加和删除current类名
        if (flag) {
            $(".nav-item").each(function(i, ele) {
                var num = $(ele).offset().top;
                num = num - 160;
                if ($(document).scrollTop() >= num) {
                    console.log(i);
                    $(".nav-container li").eq(i).children("a").addClass("current").parent("li").siblings("li").children("a").removeClass("current");
                }
            })
        }
    });

    $(".nav-container li").click(function() {
        // $(this).unbind();
        flag = false;
        // console.log($(".nav-container li"));
        // console.log($(this).index());
        var content = $(".nav-item").eq($(this).index()).offset().top;
        // console.log($(".nav-item"));
        content = content - 130;
        // console.log(content);
        $("html,body").stop().animate({
            scrollTop: content
        }, function() {
            flag = true;
        });
        // $(document).scrollTop(content);
        // 第四关点击侧边栏小li高亮切换
        $(this).children("a").addClass("current").parent("li").siblings("li").children("a").removeClass("current");
    })


    // 轮播图模块
    var swiper = new Swiper('.swiper-container', {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });


    // 鼠标滑动动画
    $('.mask-bg').mouseenter(function() {
        $(this).find(".desc").stop().animate({
            opacity: 1,
            marginBottom: "0px"
        }, 300)
    });
    $('.mask-bg').mouseleave(function() {
        $(this).find(".desc").stop().animate({
            opacity: 0,
            marginBottom: "-30px"
        }, 300)
    });
})